/*
 * @Author: Zhang Kai
 * @Date: 2021-10-29 15:34:12
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-14 11:17:12
 * @FilePath: /metricsx-standard-ui/src/views/indexmanagement/atom/components/createForm.tsx
 */
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  watchEffect,
  watch
} from 'vue';

import API from '@/services';
import { useStore } from '@/store';

const setList = defineComponent({
  name: 'SetList',
  props: {
    visible: {
      type: Boolean,
      default: () => false
    },
    setListSure: {
      type: Function,
      default: () => {}
    },
    tableColumn: {
      type: Array,
      default: () => []
    }
  },

  setup(props, { slots, attrs, emit }) {
    const store = useStore();

    const checkAll: any = ref(false);

    const isIndeterminate = ref(true);

    const handleCheckAllChange = (val: boolean) => {
      props.tableColumn.forEach((ele: any) => {
        ele.isCheck = val;
      });
      isIndeterminate.value = false;
    };
    const handleCheckedCitiesChange = (v: any) => {
      let allFalse = true;
      let allCheck = true;
      console.log('props.tableColumn: ', props.tableColumn);
      props.tableColumn.forEach((ele: any) => {
        if (!ele.isCheck) {
          allCheck = false;
        }
        if (ele.isCheck) {
          allFalse = false;
        }
      });
      checkAll.value = allCheck;
      isIndeterminate.value = !allCheck && !allFalse;
    };

    return () => {
      const { visible, setListSure } = props;
      return (
        <el-drawer
          custom-class="atom-drawer"
          v-model={visible}
          title={'设置列表'}
          close-on-click-modal={false}
          append-to-body={true}
          before-close={() => {
            store.commit('modifier/lsitDrawerVisible', false);
          }}
          direction="rtl"
          lock-scroll={false}
        >
          <div class="SetList">
            <h3>显示字段</h3>
            <el-checkbox
              v-model={checkAll.value}
              indeterminate={isIndeterminate.value}
              onChange={handleCheckAllChange}
            >
              全选
            </el-checkbox>
            <el-row>
              {props.tableColumn?.map((item: any) => {
                return (
                  <el-col span={8} style="margin-top:16px">
                    <el-checkbox
                      size="medium"
                      onChange={handleCheckedCitiesChange}
                      v-model={item.isCheck}
                      label={item.label}
                      disabled={item.disabled}
                    ></el-checkbox>
                  </el-col>
                );
              })}
            </el-row>
            <p style="text-align:center,margin-top:16px">
              说明:置灰选项为固定显示字段，勾选的字段的显示顺序按照上方排列的顺序显示;
            </p>
          </div>
          <div class="footer-btn">
            <el-button
              onClick={() => [
                store.commit('modifier/lsitDrawerVisible', false)
              ]}
            >
              取消
            </el-button>
            <el-button
              type="primary"
              onClick={() => store.commit('modifier/lsitDrawerVisible', false)}
            >
              确定
            </el-button>
          </div>
        </el-drawer>
      );
    };
  }
});

export default setList;
